<template>
  <div>
    <navbar></navbar>
    <div class="content">
      <b-tabs size="is-medium" class="block">
        <b-tab-item label="个人信息" icon="account-edit-outline">
          <section style="margin: 10px 10% 20px 10%">
            <b-message
              title="个人信息"
              type="is-info"
              aria-close-label="Close message"
            >
              你可以在这里查看或者修改个人信息
            </b-message>
          </section>
          <section style="margin: 10px 20% 0px 10%">
            <!-- <b-field horizontal label="Birthday" type="is-success">
        <b-input
          name="birth_date"
          type="text"
          v-model="birth_date"
          expanded
        ></b-input>
      </b-field> -->
            <b-field horizontal label="UID">
              <label>{{ uid }}</label>
            </b-field>
            <b-field horizontal label="注册日期">
              <label>{{ register_date.slice(0, 10) }}</label>
            </b-field>
            <b-field horizontal label="邀请人">
              <label>{{ invite }}</label>
            </b-field>
            <b-field horizontal label="生日">
              {{ birth_date.toLocaleString("en-CA").slice(0, 10) }}
            </b-field>
            <b-field horizontal label="更改生日">
              <b-datepicker
                name="birth_date"
                type="text"
                v-model="birth_date"
                expanded
                placeholder="Type or select a date..."
                icon="calendar-today"
                :locale="locale"
                editable
              >
              </b-datepicker>
            </b-field>
            <b-field horizontal label="性别">
              <b-input
                name="gender"
                type="text"
                v-model="gender"
                expanded
                placeholder="性别"
              ></b-input>
              <b-input
                name="perfered_gender"
                type="text"
                v-model="perfered_gender"
                expanded
                placeholder="爱好"
              ></b-input>
            </b-field>

            <b-field horizontal label="个性签名">
              <b-input type="text" v-model="note"></b-input>
            </b-field>
            <vs-button gradient @click="Update()"> 提交更改 </vs-button>
            <chartLint></chartLint>
          </section>
        </b-tab-item>
        <b-tab-item label="社区信息" icon="comment-multiple-outline">
          <section style="margin: 10px 10% 20px 10%">
            <b-message
              title="社区信息"
              type="is-success"
              aria-close-label="Close message"
            >
              你可以在这里查看或者修改社区信息
            </b-message>
          </section>
          <section style="margin: 10px 20% 0px 10%">
            <!-- <b-field horizontal label="Birthday" type="is-success">
        <b-input
          name="birth_date"
          type="text"
          v-model="birth_date"
          expanded
        ></b-input>
      </b-field> -->
            <b-field horizontal label="声望">
              <label>{{ honor }}</label>
            </b-field>
            <b-field horizontal label="等级">
              <label>{{ level }}</label>
            </b-field>
            <b-field horizontal label="徽章">
              <!-- <label>{{ tags }}</label> -->
            <b-taginput
                v-model="tags"
                ellipsis
                icon="label"
                placeholder="添加Tags"
                aria-close-label="Delete this tag"
                type="is-dark"
                close-type="is-danger"
                >
            </b-taginput>
            </b-field>
            <b-field horizontal label="小尾巴">
              <b-input type="text" v-model="tail"></b-input>
            </b-field>
            <b-field horizontal label="昵称">
              <b-input type="text" v-model="username"></b-input>
            </b-field>
            <vs-button gradient @click="UpdateAdmin()"> 提交更改 </vs-button>
          </section>
        </b-tab-item>
        <b-tab-item label="控制台" icon="gamepad-left" :visible="seen">
          <section style="margin: 10px 10% 20px 10%">
            <b-message
              title="控制台"
              type="is-danger"
              aria-close-label="Close message"
            >
              欢迎进入管理员的神秘世界，请谨慎操作
            </b-message>
          </section>
          <section style="margin: 10px 10% 20px 10%">
            <vs-button gradient @click="Admin()"> 控制台 </vs-button>
          </section>
        </b-tab-item>
      </b-tabs>
      
    </div>
  </div>
</template>
<script>
import navbar from "../components/common/navbar.vue";
import chartLint from "../components/userCom/chartLint";
import chartLint2 from "../components/userCom/chartLint2";
export default {
  name: "UserCenter",
  components: { navbar,chartLint,chartLint2 },
  data() {
    return {
      seen: false,
      //个人信息
      birth_date: "",
      gender: "",
      invite: "",
      note: "",
      perfered_gender: "",
      register_date: "",
      status: "",
      uid: "",
      date: "",
      locale: "en-CA",
      //社区信息
      honor: "",
      level: "",
      tags: "",
      tail: "",
      username: "",
    };
  },
  methods: {
    //更新用户信息
    async Update() {
      this.birth_date.setDate(this.birth_date.getDate() + 1);
      console.log(this.birth_date);
      let res = await this.$http.post(
        "/go/user/update",
        {
          birth_date: this.birth_date,
          gender: this.gender,
          note: this.note,
          perfered_gender: this.perfered_gender,
          register_date: this.perfered_gender,
        },
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + (await localStorage.getItem("token")),
          },
        }
      );
      if (res.data.status == 20000) {
        this.$vs.notification({ title: "提交成功" });
      }
    },
    //更新用户社区信息
    async UpdateAdmin() {
      let res = await this.$http.post(
        "/go/socail/updateInfo",
        {
          uid: this.uid,
          username: this.username,
          tail: this.tail,
          tags: this.tags,
        },
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + (await localStorage.getItem("token")),
          },
        }
      );
      if (res.data.status == 20000) {
        this.$vs.notification({ title: "提交成功" });
      }
    },
    async Admin() {
      this.$router.push({
        path: "/AdminCenter",
        query: {
          username: this.username,
          uid: this.uid,
          level: this.level,
        },
      });
    },
  },
  async beforeCreate() {
    let res = await this.$http.get("/go/user/info", {
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    this.birth_date = res.data.birth_date;
    this.gender = res.data.gender;
    this.invite = res.data.invite;
    this.note = res.data.note;
    this.perfered_gender = res.data.perfered_gender;
    this.register_date = res.data.register_date;
    this.status = res.data.status;
    this.uid = res.data.uid;
    console.log(this.birth_date);
    let res_admin = await this.$http.get("/go/socail/info/", {
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    this.honor = res_admin.data.honor.Int32;
    this.level = res_admin.data.level;
    this.tags = res_admin.data.tags;
    this.tail = res_admin.data.tail;
    this.username = res_admin.data.username;
    if (this.level != "user" && this.level != "banned") {
      this.seen = true;
    }
    console.log(res_admin);
    console.log(this.honor);
  },
};
</script>
<style scoped>
.content {
  margin-top: 70px;
  min-height: calc(100vh - 34px);
}
</style>